<template>
  <div class="login">
    <login-page title="登录">
      <div class="input-item">
        <input-text v-model="user" icon='iconfont icon-shenfenzheng' text='用户名' type='text'></input-text>
        <input-text v-model="password" icon='iconfont icon-suo' text='密码' type='password'></input-text>
      </div>
      <div class="input-item">
        <input-button text='登录' color='#fb7d3f' @click.native="login"></input-button>
        <input-button text='返回' @click.native="$router.go(-1);"></input-button>
      </div>
      <div class="input-item">
        <login-link to1='/Sign' to2='/Password' text1='注册' text2='忘记密码'></login-link>
      </div>
    </login-page>
  </div>
</template>

<script>
import { setCookie, getCookie } from "../../Tools/cookie.js";
import * as Types from "../../Store/types.js";
import LoginPage from "../Common/LoginPage";
import InputText from "../Common/InputText";
import InputButton from "../Common/InputButton";
import LoginLink from "../Common/LoginLink";
export default {
  name: "login",
  data() {
    return {
      user: "user",
      password: "password"
    };
  },
  created() {
    if (getCookie("userName")) {
      // 跳转
      this.$router.push("/Home");
    }
  },
  methods: {
    login() {
      if (this.user == "" || this.password == "") {
        this.$toast("请输入用户名或密码！");
      } else {
        if (this.user == "user" && this.password == "password") {
          // 写入Cookie
          setCookie("userName", this.user, 1000 * 60);
          // 更改登录状态
          this.$store.commit(Types.VAILD_LOGIN, true);
          // 跳转到之前的页面
          if (this.$route.query.path) {
            this.$router.push(this.$route.query.path);
          } else {
            // 没有的话，就跳转到主页
            this.$router.push("/Home");
          }
        } else {
          this.$toast("用户名或密码错误！");
        }
      }
    }
  },
  components: {
    "login-page": LoginPage,
    "input-text": InputText,
    "input-button": InputButton,
    "login-link": LoginLink
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "./css/index.css";
</style>
